<template>
<div class="page">
<div class="left">
  <van-checkbox v-model="Cartdatalocal.selected"></van-checkbox>
</div>
  <div class="right">
    <span class="img">
<!--      <span class="ImgBackground" :style="{background:'url(' + goods_img + ')'}"></span>-->
      <img class="ImgBackground"  :src="goods_img">
    </span>
    <span class="title">
    <div class="title_1"><p>{{Cartdatalocal.goods_name}}</p></div>

      <div class="price"><span style="font-size: 14px">￥</span>{{Cartdatalocal.goods_price}}</div>
 <div class="num" style="float: right"> <van-stepper v-model="Cartdatalocal.goods_num" /></div>
    </span>
  </div>
</div>
</template>

<script>
export default {
  name: "CartCard",
  props:['cartdata'],
  data(){
    return{
      Cartdatalocal:{
      },
      goods_img:""

    }
  },
  created() {
    this.Cartdatalocal=this.cartdata
    this.goods_img=this.$baseUrl+this.Cartdatalocal.goods_img
  },
  computed:{
  },
  watch:{
    cartdata(){
      this.Cartdatalocal=this.cartdata
    },
    Cartdatalocal:{
      handler(){
        this.$emit('changeNum',this.Cartdatalocal)
      },
      deep:true
    }

  }
}
</script>

<style lang="less" scoped>
.page{
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: row;
.left{
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
  .right{
    flex: 1;
    height: 100%;
    .img{
      display: inline-block;
      height: 100%;
      width: 150px;
      text-align: center;
      vertical-align: top;
      .ImgBackground{
        background-size: cover;
        background-position: center;
        display: inline-block;max-height:80%;border-radius: 10px;margin-top: 15px;
      }
    }
    .title{
      display: inline-block;
      height: 100%;
      width: calc(100% - 150px);
      padding: 0 5px ;
      box-sizing: border-box;
      position: relative;
      .title_1{
        margin-top: 30px;
        font-size: 18px;
        color: black;
        font-weight: bold;
        height: 60px;
        margin-bottom: 10px;
        p{
          line-height: 23px;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2;

        }
      }
      .price{
        color: red;
        font-size: 20px;
        margin-right: 1px;
        float: left;



      }



    }
  }
}
</style>